import { useEffect } from "react";
import { useSelector, useDispatch } from "react-redux";
import { SWITCH_TABBER } from "../store/action-type/tabber";
import { useHistory } from "react-router-dom";
import {
  AppstoreOutline,
  UnorderedListOutline,
  FaceRecognitionOutline,
  ShopbagOutline,
  UserCircleOutline,
} from "antd-mobile-icons";

function TabBer() {
  const { active, hide } = useSelector((store) => store.tab);
  const disPatch = useDispatch();
  const { replace, push } = useHistory();
  const histtory = useHistory();
  useEffect(() => {
    let path = histtory.location.pathname;
    switch (true) {
      case /^(\/Cart)/.test(path):
        return disPatch({ type: SWITCH_TABBER, index: 3 });
      case /^(\/)$/.test(path):
        return disPatch({ type: SWITCH_TABBER, index: 0 });
      case /^(\/List)/.test(path):
        return disPatch({ type: SWITCH_TABBER, index: 1 });
      case /^(\/Find)/.test(path):
        return disPatch({ type: SWITCH_TABBER, index: 2 });
      case /^(\/User)/.test(path):
        return disPatch({ type: SWITCH_TABBER, index: 4 });
      default:
        return;
    }
  }, []);
  return (
    <>
      <ul className="tabber" style={{ display: hide ? "none" : "" }}>
        <li
          className={active == 0 ? "active" : ""}
          onClick={() => {
            replace("/");
            disPatch({ type: SWITCH_TABBER, index: 0 });
          }}
        >
          <i>
            <AppstoreOutline />
          </i>
          首页
        </li>
        <li
          className={active == 1 ? "active" : ""}
          onClick={() => {
            replace("/List");
            disPatch({ type: SWITCH_TABBER, index: 1 });
          }}
        >
          <i>
            <UnorderedListOutline />
          </i>
          分类
        </li>
        <li
          className={active == 2 ? "active" : ""}
          onClick={() => {
            disPatch({ type: SWITCH_TABBER, index: 2 });
          }}
        >
          <i
            className="Find"
            onClick={() => {
              push("/preferential");
            }}
          >
            <FaceRecognitionOutline />
          </i>
          <span
            onClick={() => {
              replace("/Find");
            }}
          >
            发现
          </span>
        </li>
        <li
          className={active == 3 ? "active" : ""}
          onClick={() => {
            replace("/Cart");
            disPatch({ type: SWITCH_TABBER, index: 3 });
          }}
        >
          <i>
            <ShopbagOutline />
          </i>
          购物车
        </li>
        <li
          className={active == 4 ? "active" : ""}
          onClick={() => {
            replace("/User");
            disPatch({ type: SWITCH_TABBER, index: 4 });
          }}
        >
          <i>
            <UserCircleOutline />
          </i>
          个人中心
        </li>
      </ul>
    </>
  );
}

export default TabBer;
